<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/swiper.min.css" />
    <style>
      .swiper-outer{
        width: 95%;
        padding: 2rem 0;
        margin: 0 auto;
      }
      .swiper-container{
        width: 100%;
        border-radius: 10px;
        overflow: hidden;
        margin: 0 auto;
        box-sizing: border-box;
      }
      .swiper-slide{
        height: 20rem;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
      }
      /* 新列表 */
      .newlist{
        margin: 4rem auto 8rem;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-self: center;
        width: 90%;
      }
      .newlist li{
        width: 25%;
        display: flex;
        align-items: center;
        flex-direction: column;
        font-size: 24px;
        color: #666;
      }
      .newlist li img{
        width: 4rem;
        height: 4rem;
        margin: 10px auto;
      }
      /* 氧舱治疗 */
      .yc{
        width: 90%;
        height: 8rem;
        background: #FFFFFF;
        box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
        border-radius: 12px;
        margin: 40px auto;
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
      .yc-left{
        display: flex;
        justify-content: space-around;
        flex-direction: column;
      }
      .yc-left>p:first-child{
        font-size: 1.6rem;
        font-weight: 700;
        padding-bottom: 0.8rem;
      }
      .yc-left>p:last-child{
        font-size: 1.2rem;
        color: #666;
      }
      .yc-right>div:first-child{
        width: 8rem;
        height: 3rem;
        line-height: 3rem;
        border-radius: 1.6rem;
        text-align: center;
        color: #fff;
        background-color: pink;
        box-shadow: 0 0 8px rgba(247, 146, 146, 0.6);
      }
    </style>
</head>

<body>
    <main id="app">
      <!-- 轮播图 -->
      <div class="swiper-outer">
          <div class="swiper-container">
              <div class="swiper-wrapper">
                  <div class="swiper-slide" v-for="(bannerItem, index) in bannerList">
                    <img :src="bannerItem">
                  </div>
              </div>
              <div class="swiper-pagination"></div>
          </div>
      </div>
      
      <!-- list列表展示 -->
      <ul class="newlist">
        <li tapmode onclick="enterEvaluationPage()">
          <img src="../image/xiangqing.png" alt="">
          患者详情
        </li>
        <li tapmode onclick="enterEquipmentManagePage()">
          <img src="../image/xunjian.png" alt="">
          设备巡检
        </li>
        <li tapmode onclick="enterRenewalContainerPage()">
          <img src="../image/xufeiguanli.png" alt="">
          续费管理
        </li>
      </ul>
      <!-- 氧舱治疗 -->
      <div class="yc"  onclick="enterCabinPage()">
        <div class="yc-left">
          <p>一号舱</p>
          <p>氧舱治疗/氧舱治疗</p>
        </div>
        <div class="yc-right">
          <div>
              立刻打开
          </div>
        </div>
      </div>
      <div class="yc"  onclick="enterCabinPageTwo()">
        <div class="yc-left">
          <p>二号舱</p>
          <p>氧舱治疗/氧舱治疗</p>
        </div>
        <div class="yc-right">
          <div>
              立刻打开
          </div>
        </div>
      </div>
      <div class="yc"  onclick="enterCabinPageTherr()">
        <div class="yc-left">
          <p>三号舱</p>
          <p>氧舱治疗/氧舱治疗</p>
        </div>
        <div class="yc-right">
          <div>
              立刻打开
          </div>
        </div>
      </div>
    </main>
</body>

</html>

<script src="../script/api.js" charset="utf-8"></script>
<script src="../script/vue.js" charset="utf-8"></script>
<script src="../script/swiper.min.js" charset="utf-8"></script>
<script type="text/javascript">
    apiready = function () {
      var vm = new Vue({
        el: '#app',
        data: {
          bannerList: [
            '../image/banner_0.jpg',
            '../image/banner_1.jpg',
            '../image/banner_2.jpg',
            '../image/banner_3.jpg'
          ]
        }
      })

      var mySwiper = new Swiper('.swiper-container', {
        autoplay: 5000, //可选选项，自动滑动
        loop: true,
        pagination: {
          el: '.swiper-pagination',
        }
      })
    }

    // 患者评估
    function enterEvaluationPage() {
      api.openWin({
          name: 'evaluation',
          url: './evaluation.html',
          pageParam: {
              name: 'evaluation',
              userName:api.pageParam["userName"]
          }
      });
    }

    // 患者管理
    function enterEvaluationManagePage() {
      api.openWin({
          name: 'evaluation-manage-header',
          url: './evaluation-manage-header.html',
          pageParam: {
              name: 'evaluation-manage-header',
              userName:api.pageParam["userName"]
          }
      });
    }
    // 氧舱治疗 一号舱
    function enterCabinPage() {
      api.openWin({
          name: 'yangcangzhiliao-header',
          url: './yangcangzhiliao-header.html',
          pageParam: {
              name: 'yangcangzhiliao-header',
              userName:api.pageParam["userName"]
          }
      });
    }
  //二号舱
    function enterCabinPageTwo() {
      api.openWin({
          name: 'yangcangzhiliao-two-header',
          url: './yangcangzhiliao-two-header.html',
          pageParam: {
              name: 'yangcangzhiliao-two-header',
              userName:api.pageParam["userName"]
          }
      });
    }
   //三号舱
    function enterCabinPageTherr() {
      api.openWin({
          name: 'yangcangzhiliao-three-header',
          url: './yangcangzhiliao-three-header.html',
          pageParam: {
              name: 'yangcangzhiliao-three-header',
              userName:api.pageParam["userName"]
          }
      });
    }
    // 患者详情
    function enterMissionPage() {
      api.openWin({
          name: 'missionPage',
          url: './mission.html',
          pageParam: {
              name: 'mission',
              userName:api.pageParam["userName"]
          }
      });
    }
    //设备巡检
    function enterEquipmentManagePage() {
      api.openWin({
          name: 'equipment-manage-header',
          url: './equipment-manage-header.html',
          pageParam: {
              name: 'equipment-manage-header',
              userName:api.pageParam["userName"]
          }
      });
    }
    //缴费管理
    function enterRenewalContainerPage() {
      api.openWin({
          name: 'renewal-container-header',
          url: './renewal-container-header.html',
          pageParam: {
              name: 'renewal-container-header'
          }
      });
    }
</script>
